<template>
  <div class="main">
    <div class="tool">
        <span class="tittle">会员复购率分析</span>
            <select class="year-select" v-model="timeCodeSelect">
              <option v-for="(item, index) in timeCodeList" :value="item.id">{{item.value}}</option>
            </select>

        <div class="radio">
            <label>
                <input type="radio" v-model="shopCode" value="all"/>
                <span class="option" style="margin-right: 5px;"><span class="option-span"></span></span>
                <span>所有门店</span>
            </label>
        </div>
        <div class="radio">
            <label>
                <input type="radio" v-model="shopCode" value="shop" v-on:click="$common.focusset($event, 'shop-code-input')" />
                <span class="option"><span class="option-span"></span></span>
                <input type="text" id="shop-code-input" class="shop-code-input" v-model="shopCodeInput" placeholder="请输入指定的店仓编码" :disabled="shopCode != 'shop'">
            </label>
        </div>
        <button class="select-button" v-on:click="getChartData">查询</button>
    </div>
    <div class="tag">
        <button :class="{ 'active': calculateType == 0 }" v-on:click="changeCalculateType(0)">按客户计算</button><button  :class="{ 'active': calculateType == 1 }" v-on:click="changeCalculateType(1)">按交易计算</button>
        <div class="legend">
            <span><span></span>2单及以上订单数</span>
            <span><span></span>订单总数</span>
            <span><span></span>复购率</span>
        </div>
    </div>
    <div id="main"></div>
  </div>
</template>

<script>

export default {
  name: 'MemberRepurchase',
  data () {
    return {
        // 年份
        timeCodeList: [
            {
                id: "all",
                value: "all"
            }
        ],
        timeCodeSelect: 'all',
        // 店面选择字段 初始化为all
        shopCode: 'all',
        shopCodeInput: '',
        //  表格计算类型 0: 客户， 1： 交易
        // 1 表示按照客户计算，2表示按照交易计算
        // 默认按照客户计算
        calculateType: 0,
    }
  },
  components: {
  },
  created () {
    const vue = this
    // 获取年份
    this.$ajaxServer.post(this.$ajaxServer.postRepeatTimeCalculateUrl, null, null, true, false, this, function(data) {
        // console.log(data.time_data)
        data.time_data.forEach(function(element, index) {
            vue.timeCodeList.push(element)
        })
    })

  },
  mounted () {
    // 初始化获取并生成图表数据
    this.getChartData()

  },
  methods: {
    /* 更改calculateType */
    changeCalculateType: function(value) {
        // 更改类型
        this.calculateType = value
        // 获取数据
        this.getChartData()
    },
    /* 获取图表数据 */
    getChartData: function() {
        const vue = this

        const params = {
            "calculate_type": this.$const.calculateType[this.calculateType],
            "shop_code": this.shopCode == 'all' ? this.shopCode : this.shopCodeInput,
            "time_code": this.timeCodeSelect
        }
        // console.log(params)
        this.$ajaxServer.post(this.$ajaxServer.postRepeatShoppingRateUrl, null, params, true, false, this, function(data) {
            console.log(data)
            const option = vue.$config.option
            if (!data.body) {
                // 清除数据
                option.xAxis[0].data = []
                option.series[0].data = []
                option.series[1].data = []
                option.series[2].data = []
                
                // alert("请求数据异常")
                vue.$toastr('warning', '数据异常', 'warning')

            } else {
                // 成功的场合，数据填充
                // 清除横坐标设置
                option.xAxis[0].data = []
                // 设置横坐标轴
                data.time_body.value.forEach(function(element, index) {
                    option.xAxis[0].data.push(element + data.time_body.name)
                })
                // 填充数据
                option.series[0].name = data.body.above_limit.name
                option.series[0].type = 'bar'
                option.series[0].data = data.body.above_limit.value
                // 填充数据
                option.series[1].name = data.body.total_amount.name
                option.series[1].type = 'bar'
                option.series[1].data = data.body.total_amount.value
                // 填充数据
                option.series[2].name = data.body.rate.name
                option.series[2].type = 'line'
                option.series[2].data = []
                data.body.rate.value.forEach(function(element) {
                    option.series[2].data.push(vue.$common.formatFloat(element * 100, 2))
                })                
            }
            // 生成图表
            vue.$common.echartsStyleNormal(vue, 'main', option)

        })

    }

  }
}

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.main {
    margin: 10px auto;
    border: 1px solid #748292;
    border-radius: 5px;
    width: 800px;
    .tool {    
        .tittle {
            display: inline-block;
            color: #495D76;
            font-size: 15px;
            padding: 11px 24px 16px 7px;
        }
        .year-select {
            display: inline-block;
            font-size: 12px;
            height: 23px;
            width: 80px;
            outline: none;
            margin-right: 36px;
        }
        .radio {
            display: inline-block;
            label {
                display: inline-block;
                padding: 10px 10px;
                line-height: 20px;
                position: relative;
                font-size: 12px;
                cursor: pointer;
            }
            .option {
                width: 12px;
                height: 12px;
                display: inline-block;
                border: 1px solid #ccc;
                border-radius: 50%;
                position: relative;
                top: 3px;
                .option-span {
                    position: absolute;
                    top: 3px;
                    left: 3px;
                    width: 6px;
                    height: 6px;
                    background: #fff;
                    border-radius: 50%;
                }   
            }
            .shop-code-input {
                line-height: 20px;
                outline: none;
                border: none;
                border-radius: 2px;
                margin-left: 13px;
                padding: 0px 10px;
                font-size: 12px;
                background: #eeeeee;
            }
            .shop-code-input:disabled {
                background-color: #F7F8FA;
            }
            input[type="radio"] {
                display: none;
            }
            input[type="radio"]:checked+.option .option-span{
                background-color: #57a3f3;
            }
        }
        .select-button {
            background-color: #4DB7AD;
            border: none;
            color: #E4F6F5;
            height: 23px;
            font-size: 12px;
            outline: none;
            border-radius: 4px;
            padding: 0px 20px;
            margin-left: 6px;
        }
    }
    .tag {
        margin-left: 18px;
        margin-right: 18px;
        button {
            background-color: #ffffff;
            border: .5px solid #CACFD5;
            outline: none;
            font-size: 12px;
            width: 90px;
            height: 23px;
        }
        .active {
            background-color: #2196F3;
            color: #ffffff;
            border: .5px solid #2196F3;
        }
        .legend {
            float: right;
            font-size: 12px;
            margin-top: 6px;
            span {
                margin-right: 13px;
                span {
                    margin-right: 5px;
                }
            }
            :first-child span {
                display: inline-block;
                height: 9px;
                width: 9px;
                border-radius: 50%;
                background-color: #2185C5;
            }
            :first-child+span span{
                display: inline-block;
                border-radius: 50%;
                height: 9px;
                width: 9px;
                background-color: #BFEBFF;
            }
            :first-child+span+span {
                margin-right: 0px;
                span {
                    display: inline-block;
                    border-radius: 50%;
                    height: 9px;
                    width: 9px;
                    background-color: #FF8497;
                }
            }
        }

    }
    #main {
        margin: 0 auto;
        width: 800px;
        height:400px;
    }
}


input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { 
 /* WebKit browsers */ 
color: #666; 
} 
input:-moz-placeholder, textarea:-moz-placeholder { 
/* Mozilla Firefox 4 to 18 */ 
color: #666; 
} 
input::-moz-placeholder, textarea::-moz-placeholder { 
 /* Mozilla Firefox 19+ */ 
color: #666; 
} 
input:-ms-input-placeholder, textarea:-ms-input-placeholder { 
 /* Internet Explorer 10+ */ 
color: #666; 
} 

</style>
